<template>
	<view class="wallet">
		<app-title titlesBackground="#8D84FF" ::lefticonSize='0' text="钱包" color="#fff"></app-title>
		<view class="wallet_box">
			<view class="wallet_box_scroll">
				<view class="wallet_box_scroll_money">
					<view class="wallet_box_scroll_money_"
						@click="gotoFun('/pages/wallet/tixianmingxi/tixianmingxi?type=1')">
						<text>余额（元）</text>
						<view class="money">
							<!-- 6000.00 -->
							{{res.credit2}}
						</view>
					</view>
					<view class="wallet_box_scroll_money_"
						@click="gotoFun('/pages/wallet/tixianmingxi/tixianmingxi?type=0')">
						<text>收益（元）</text>
						<view class="money">
							<!-- 6000.00 -->
							{{res.shouyi}}
						</view>
					</view>
				</view>
				<view class="wallet_box_scroll_userinfo">
					<view class="wallet_box_scroll_userinfo_">ID：{{res.id}}</view>
					<view class="wallet_box_scroll_userinfo_">{{res.mobile}}</view>
				</view>
				<view class="wallet_box_scroll_juxing">
					<view class="wallet_box_scroll_juxing_" @click="gotoFun('/pages/wallet/pay/pay')">充值</view>
					<view class="wallet_box_scroll_juxing_ juxing_border"
						@click="gotoFun('/pages/wallet/tixian/tixian?type=1')">提现</view>
					<view class="wallet_box_scroll_juxing_" @click="gotoFun('/pages/wallet/tixian/tixian?type=0')">收益提现
					</view>
				</view>
				<view class="wallet_box_scroll_table">
					<view class="wallet_box_scroll_table_row">
						<view class="wallet_box_scroll_table_row_item ">
							<view class="wallet_box_scroll_table_row_item_box"
								@click="gotoFun('/pages/wallet/tixianmingxi/tixianmingxi?type=2')">
								<view class="icons">
									<image src="@/static/wallet/shouji.png" mode="widthFix"></image>
								</view>
								<view class="titles">
									优惠券持仓
								</view>
								<view class="money">
									<!-- 00000.00 -->
									{{res.dongjie}}
								</view>
							</view>
						</view>
						<view class="wallet_box_scroll_table_row_item row_item_border">
							<view class="wallet_box_scroll_table_row_item_box"
								@click="gotoFun('/pages/wallet/tixianmingxi/tixianmingxi?type=3')">
								<view class="icons">
									<image src="@/static/wallet/qian.png" mode="widthFix"></image>
								</view>
								<view class="titles">
									积分兑换
								</view>
								<view class="money">
									<!-- 000000.00 -->
									{{res.shop_credit}}
								</view>
							</view>
						</view>
					</view>
					<view class="wallet_box_scroll_table_row">
						<view class="wallet_box_scroll_table_row_item ">
							<view class="wallet_box_scroll_table_row_item_box"
								@click="gotoFun('/pages/wallet/tixianmingxi/tixianmingxi?type=4')">
								<view class="icons">
									<image src="@/static/wallet/xinyongka.png" mode="widthFix"></image>
								</view>
								<view class="titles">
									可买优惠券
								</view>
								<view class="money">
									<!-- 00000.00 -->
									{{res.available_credit}}
								</view>
							</view>

						</view>
						<view class="wallet_box_scroll_table_row_item row_item_border">
							<view class="wallet_box_scroll_table_row_item_box"
								@click="gotoFun('/pages/wallet/tixianmingxi/tixianmingxi?type=5')">
								<view class="icons">
									<image src="@/static/wallet/loufang.png" mode="widthFix"></image>
								</view>
								<view class="titles">
									可卖优惠券
								</view>
								<view class="money">
									{{res.user_cd}}
								</view>
							</view>


							<view class="wallet_box_center_item_position" @click="appgotoFun">
								进入数农
							</view>
						</view>
					</view>
					<view class="wallet_box_scroll_table_row" style="border: none;">
						<view class="wallet_box_scroll_table_row_item ">
						</view>
						<view class="wallet_box_scroll_table_row_item row_item_border">
						</view>
					</view>
				</view>
			</view>
		</view>
		<app-tab :tabIndex='3'></app-tab>
	</view>
</template>

<script>
	import appTitle from "@/components/appTitle.vue";
	import appTab from "@/components/appTab.vue";
	import {
		member
	} from "@/api/wallet.js";
	export default {
		components: {
			appTitle,
			appTab
		},
		data() {
			return {
				openid: '',
				res: ''
			};
		},
		onShow() {
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.memberFun();
				},
				fail: () => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});
			uni.hideTabBar()
		},
		methods: {
			appgotoFun() {
				uni.navigateTo({
					url: '/pages/wallet/goto/goto'
				})
			},
			downloads() {
				if (process.env.UNI_PLATFORM === 'h5') {
					// 在H5环境中打开
					console.log('在H5环境中打开');
					this.showinteraction('请在App端点击下载');
				} else if (process.env.UNI_PLATFORM === 'app-plus') {
					// 在App环境中打开
					console.log('在App环境中打开');
					this.updateTypes = true;
					this.pointerevents = 'none'
					this.link = 'wifi'
					this.dlbtn = '正在下载 0%'
					this.newtext = '正在后台下载，请稍后'
					let _this = this;
					var downToak = plus.downloader.createDownload(
						"http://newappadmin.zhongzihuacai.com/newzyhc.apk", { //拿到下载任务的对象
							filename: '_doc/update/'
						},
						function(d, status) {
							plus.nativeUI.closeWaiting();
							if (status == 200) { //在回调中根据状态 进行操作
								plus.runtime.install(plus.io.convertLocalFileSystemURL(d
									.filename), {}, {}, function(
									error) {
									uni.showToast({
										title: '安装失败',
										mask: false,
										duration: 1500
									});
								})
							} else {
								app.alert("配置出错,请检查网络链接！");
							}
						});
					downToak.start(); // 开启下载的任务
					var prg = 0;
					downToak.addEventListener("statechanged", function(task,
						status) { //给下载任务设置一个监听 并根据状态  做操作
						// console.log(prg)
						switch (task.state) {
							case 1:
								break;
							case 2:
								break;
							case 3:
								prg = parseInt(parseFloat(task.downloadedSize) / parseFloat(task
									.totalSize) * 100);
								_this.dlbtn = '正在下载 ' + prg + '%';
								_this.right = 100 - Number(prg) + '%'
								// _this.style_css = 'width:' + prg + '%;';
								if (prg === 100) {
									_this.updateTypes = false;
									_this.dlbtn = '';
								}
								break;
							case 4:
								break;
						}
					});
				}
			},


			async memberFun() {
				let data = await member(this.openid);
				this.res = data;
				console.log(data);
			},
			gotoFun(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.wallet {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;


		.wallet_box {
			width: 100%;
			flex: 1;
			overflow-y: auto;


			.wallet_box_scroll {
				width: 100%;
				// height: 100vh;
				background-image: url('@/static/wallet/wallet_bj.png');
				background-repeat: no-repeat;
				background-size: 100%;

				.wallet_box_scroll_money {
					width: 100%;
					display: flex;
					height: 200rpx;
					padding: 0 100rpx;
					justify-content: space-between;
					text-align: center;
					color: #fff;
					padding-top: 60rpx;

					.wallet_box_scroll_money_ {
						display: flex;
						flex-direction: column;
						justify-content: center;

						.money {
							font-size: 54rpx;
							font-weight: 500;
							margin-top: 20rpx;
						}
					}
				}

				.wallet_box_scroll_userinfo {
					width: 100%;
					height: 60rpx;
					display: flex;
					justify-content: space-around;
					padding: 0 120rpx;
					color: #D4CFFF;
					font-size: 28rpx;
					line-height: 60rpx;
					margin-top: 40rpx;
				}

				.wallet_box_scroll_juxing {
					display: flex;
					width: 70%;
					height: 90rpx;
					align-items: center;
					background-color: #fff;
					border-radius: 90rpx;
					box-shadow: 0 0 20rpx #ccc;
					margin: 0 auto;
					margin-top: 30rpx;
					color: #8D84FF;
					justify-content: center;

					.wallet_box_scroll_juxing_ {
						margin: 0 26rpx;
						font-size: 26rpx;
						width: 120rpx;
						text-align: center;
					}

					.juxing_border {
						// background-color: #ccc;
						margin: 0;
					}

					.juxing_border::after {
						content: '';
						width: 1rpx;
						height: 28rpx;
						margin-top: 4rpx;
						border-left: 1rpx solid #8D84FF;
						float: right;
					}

					.juxing_border::before {
						content: '';
						width: 1rpx;
						height: 28rpx;
						float: left;
						margin-top: 4rpx;
						border-left: 1rpx solid #8D84FF;
					}
				}

				.wallet_box_scroll_table {
					width: 100%;
					padding: 20rpx;

					.wallet_box_scroll_table_row {
						width: 100%;
						height: 300rpx;
						border-bottom: 1rpx solid #E7E7E7;
						display: flex;

						.row_item_border::before {
							content: '';
							display: block;
							width: 2rpx;
							height: 300rpx;
							background-color: #E7E7E7;
						}

						.wallet_box_scroll_table_row_item {
							flex: 1;
							display: flex;
							position: relative;

							.wallet_box_center_item_position {
								position: absolute;
								background-color: #8d84ff;
								// padding: 10rpx 30rpx;
								width: 160rpx;
								height: 50rpx;
								font-size: 26rpx;
								line-height: 50rpx;
								text-align: center;
								color: #fff;
								left: 0;
								right: 0;
								margin: 0 auto;
								bottom: 10rpx;
								border-radius: 50rpx;
							}

							.wallet_box_scroll_table_row_item_box {
								width: 100%;
								height: 100%;
								display: flex;
								align-items: center;
								flex-direction: column;
								justify-content: center;

								.icons {
									width: 50rpx;
									height: 80rpx;
									display: flex;
									align-items: center;

									image {
										width: 100%;
									}
								}

								.titles {
									color: #9AABB9;
									font-size: 28rpx;
								}

								.money {
									color: #090D10;
									font-size: 35rpx;
								}

							}

						}
					}
				}
			}
		}
	}
</style>